<template>
  <div id="app">
    <div class="container">
      <div
        class="add-wr"
        v-cloak
        @click="addInfo"
      >
        <el-button type="primary">新增<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>
      <div
        class="table-wr"
        v-cloak
      >
        <el-table
          :data="mockData"
          style="width: 100%"
          max-height="650"
          border
        >
          <el-table-column
            fixed
            prop="productBigType"
            label="产品大类"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productSmallType"
            label="产品小类"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productSmallTypeName"
            label="产品小类名称"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productCode"
            label="产品编号"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="houseAddr"
            label="抵押物所在地"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="riskMin"
            label="最小风险系数"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="riskMax"
            label="最大风险系数"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="quotaMin"
            label="最小额度(万)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="quotaMax"
            label="最大额度(万)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="rateMin"
            label="最低利率(%)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="rateMax"
            label="最高利率(%)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="termMin"
            label="最低期限(月)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="termMax"
            label="最高期限(月)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="repaymentWay"
            align="center"
            label="还款方式"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="repaymentWayName"
            label="还款方式名称"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="approvalTime"
            label="审批时间"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="loanRatio"
            label="可贷成数"
            width="80"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productHighlights"
            label="产品亮点"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productLabel"
            label="产品标签"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="applicationConditions"
            label="申请条件"
            width="400"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="handlingInformation"
            label="办理资料"
            width="500"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="handlingProcess"
            label="办理流程"
            width="400"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="commonProblem"
            label="常见问题"
            width="300"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="realNumberPeople"
            label="真实咨询人数"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="basicNumberPeople"
            label="基础人数"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="perTwoHour"
            label="增长人数"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productSort"
            label="产品排序"
            width="80"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="elementSort"
            label="要素排序"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="useModule"
            label="使用模块"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="rateShow"
            label="利率展示"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="rateType"
            label="利率类型"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="loanType"
            label="贷款类型"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            label="修改时间"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="isDelete"
            label="是否已删除"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                @click="editInfo(scope.row)"
                type="text"
                size="small"
              >编辑</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <Edit
      :show-dialog.sync="editDialogFormVisible"
      :edit-data="editData"
    ></Edit>
    <Add :show-dialog.sync="addDialogFormVisible"></Add>

  </div>
</template>

<script>
// import mockData from "./js/productconfig.js";

import Edit from "./components/edit.vue";
import Add from "./components/add.vue";
export default {
  name: "App",
  components: {
    Edit,
    Add
  },
  data() {
    return {
      mockData: [],
      editData: [],
      editDialogFormVisible: false,
      addDialogFormVisible: false
    };
  },
  watch: {},
  mounted() {
    Request.GET(
      { api: "http://imisty.cn:8088/product-config/list", ignore: true },
      res => {
        this.mockData = res.data;
        console.log(res);
      }
    );
  },
  methods: {
    addInfo() {
      this.addDialogFormVisible = true;
    },
    editInfo(data) {
      this.editDialogFormVisible = true;
      this.editData = data;
      console.log(this.ruleForm);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;

  user-select: text;
}
.add-wr {
  text-align: right;
  margin-bottom: 20px;
}
</style>
